<template>
	<view class="home">
		<u-sticky>
			<view class="navbar">
				<!-- 切换 -->
				<uni-icons type="left" size="26" @click="fanhui"></uni-icons>
				<view class="navbar_flx">
					<view class="time-switcher">
						<!-- 					<view class="left-btn" @click="switchTime(-1)">
							<u-icon name="play-left-fill" size="30" color="#4a90e2"></u-icon>
						</view>
						<view class="current-time">
							{{ displayTime }}
						</view>
						<view class="right-btn" @click="switchTime(1)" :class="{ disabled: isToday }">
							<u-icon name="play-right-fill" size="30" :color="isToday ? '#cccccc' : '#4a90e2'"></u-icon>
						</view> -->
					</view>
				</view>
				<view class="" @click="rightClick">
					<u-icon name="grid" color="#000000" size="26"></u-icon>
				</view>
			</view>
		</u-sticky>
		<mescroll-body @init="mescrollInit" @up="upCallback" :down="downOption" @down="downCallback" :up="upOption">
			<view class="devitem">
				<view class="devitem_flx" v-for="(i,index) in dataList" :key="index" @click="devitFn(i)">
					<view class="flx_cob">
						<view class="" style="width: 40rpx;height: 40rpx;" v-if="i.did">
							<image style="width: 40rpx;height: 40rpx;" src="/static/zijion.png" mode=""></image>
						</view>
						<view class="" style="width: 40rpx;height: 40rpx;" v-if="!i.did">
							<image style="width: 40rpx;height: 40rpx;" src="/static/zijioff.png" mode=""></image>
						</view>
						<view class="textt">
							<view class="">
								{{i.name}}
							</view>
						</view>
					</view>

					<view class="yuansfla">
						<view class="yuansitema" v-if="i.todayRainfall <= 0">
							<text class="texjjt">今</text><text>{{i.todayRainfall}}</text>
						</view>
						<view class="yuansitemc" v-if="i.todayRainfall > 0">
							<text class="texjjt">今</text><text>{{i.todayRainfall}}</text>
						</view>
						<view class="yuansitemb" v-if="i.yesterdayRainFall <= 0">
							<text class="texjjt">昨</text><text>{{i.yesterdayRainFall}}</text>
						</view>
						<view class="yuansitemc" v-if="i.yesterdayRainFall > 0">
							<text class="texjjt">昨</text><text>{{i.yesterdayRainFall}}</text>
						</view>
						<!-- <view class="" v-if="i.ereyesterdayRainFall <= 0">
							{{i.ereyesterdayRainFall}}
						</view> -->


						<!-- <view class="" style="color: #cf0000;" v-if="i.ereyesterdayRainFall > 0">
							{{i.ereyesterdayRainFall}}
						</view> -->
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		adjustDate
	} from '@/utils/dateUtil.js';
	import dayjs from '@/common/dayjs.min.js';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				titleStyle: {
					color: '#000000',
					fontSize: '40rpx'
				},
				upOption: {
					page: {
						num: 0,
						size: 30 // 每页数据的数量,默认10
					},
					noMoreSize: 2,
					empty: {
						tip: '暂无相关数据'
					}
				},
				downOption: {},
				dataList: [],
				relativenNum: '', //相对时间
				rfsgId: '',
				groupName: '',
				timeAddition: 1, //计算时间加减默认今天
				calculationTime: '',
				defaultToday: '',
				currentDate: new Date()
			}
		},
		computed: {
			displayTime() {
				const year = this.currentDate.getFullYear()
				const month = this.currentDate.getMonth() + 1
				const day = this.currentDate.getDate()
				return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
			},
			isToday() {
				const today = new Date()
				return (
					this.currentDate.getFullYear() === today.getFullYear() &&
					this.currentDate.getMonth() === today.getMonth() &&
					this.currentDate.getDate() === today.getDate()
				)
			}
		},
		onLoad(option) {
			this.rfsgId = option.id
			this.groupName = option.name
			// this.defaultToday = dayjs().format('YYYY-MM-DD');
			// this.calculationTime = dayjs().format('YYYY-MM-DD');
		},
		onShow() {
			setTimeout(() => {
				this.downCallback()
			}, 100)
		},
		methods: {
			rightClick() {
				uni.redirectTo({
					url: '/pages/index/managementOffice?name=' + '人工'
				});
				console.log('-------------------------------------');
			},
			switchTime(days) {
				if (days > 0 && this.isToday) return

				const newDate = new Date(this.currentDate)
				newDate.setDate(newDate.getDate() + days)
				this.currentDate = newDate
				this.reloadList()
			},
			// 增加一天减去一天
			// timeDEL() {
			// 	this.calculationTime = adjustDate(this.defaultToday, this.timeAddition--)
			// 	this.reloadList()
			// },
			// timeADD() {
			// 	this.calculationTime = adjustDate(this.defaultToday, this.timeAddition++)
			// 	this.reloadList()
			// },
			// 人工测报
			devitFn(i) {
				console.log(i);
				uni.navigateTo({
					url: '/pages/index/manualReportingDetails?id=' + i.id + '&name=' + i.name + '&date=' + this
						.displayTime + '&todayRainfall=' + i.todayRainfall
					// url: '/pages/index/setUp'
				});
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				});
			},
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				uni.$u.http.get('/api/device/device/getRenGongRainfallStationList', {
					params: {
						"pageSize": pageSize,
						"pageNum": pageNum,
						"rfsgId": this.rfsgId,
						"date": this.displayTime,
					}
				}).then(res => {
					console.log('人工雨量站列表', res);
					if (res.code == 200) {

						// 接口返回的当前页数据列表 (数组)
						let curPageData = res.rows;
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
						// let totalPage = data.total;
						// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
						let totalSize = res.total;
						// 接口返回的是否有下一页 (true/false)

						//设置列表数据

						if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
						this.dataList = this.dataList.concat(curPageData); //追加新数据
						console.log('列表', this.dataList);
						//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
						this.mescroll.endBySize(curPageLen, totalSize);
					} else {
						uni.showToast({
							title: '暂无数据',
							duration: 1500
						});
					}
				}).catch(err => {
					console.log('err', err);
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})
			},
			// 相对时间
			relativeTime(date) {
				const dateToCheck = dayjs(date.TIM);
				// 获取今天的日期
				const today = dayjs().format('YYYY-MM-DD HH:mm');
				// 计算dateToCheck距离今天的天数差异
				const daysDifference = dateToCheck.diff(today, 'day');
				// 如果你想要一个绝对值（不考虑正负），可以使用Math.abs
				const absoluteDaysDifference = Math.abs(daysDifference);
				return absoluteDaysDifference
			},
			// 电量
			electricFn(data) {
				let nub = (data - 8) / (12 - 8) * 100
				return nub.toFixed(0)
			},
			// 下拉刷新
			downCallback() {
				this.dataList = []
				this.mescroll.resetUpScroll();
			},
			/*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
			reloadList() {
				this.mescroll.resetUpScroll();
			}
		}
	}
</script>
<style scoped lang="scss">
	// 时间切换
	.time-switcher {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 430rpx;
		height: 80rpx;
		// margin-right: 20rpx;
		// background-color: #ff0202;

		.current-time {
			font-size: 45rpx;
			color: #333;
		}
	}

	.home {
		.navbar {
			padding: 80rpx 30rpx 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: rgba(242, 241, 246, 0.3);
			backdrop-filter: blur(20rpx);

			/* 应用磨砂效果 */
			// background-color: #5275a8;
			.navbar_flx {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.navbar_byg {
					border-radius: 10rpx;
					background-color: #5275a8;
					border: #000000 solid 1rpx;
				}

				.navbar_acv {
					background-color: #75a8f0;
				}

				.navbar_text {
					font-size: 48rpx;
					border-radius: 10rpx;
					padding: 5rpx 20rpx;
					margin: 0 10rpx;
					color: #ffffff;
					background-color: #5275a8;
					border: #000000 solid 1rpx;
				}
			}
		}

		.devitem {
			// padding: 30rpx;
			// border-radius: 30rpx;

			.devitem_flx {
				margin: 10rpx;
				padding: 20rpx;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				// flex-wrap: wrap;
				// border: 1rpx solid #000000;
				background-color: rgba(255, 255, 255, 0.9);

				.flx_cob {
					display: flex;
					align-items: center;
					width: 400rpx;
					// background-color: #5275a8;

					.tubi {
						width: 10rpx;
						height: 40rpx;
						border-radius: 30rpx;
						margin: 0 10rpx;
						background-color: #5275a8;
					}

					.textt {
						font-size: 40rpx;
						color: #000000;
					}
				}

				.yuansfla {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 38rpx;
					color: #ffffff;
					width: 270rpx;
					// background-color: #333;
					.yuansitema {
						width: 130rpx;
						text-align: center;
						padding: 3rpx 0rpx;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #55aa7f;
					}

					.yuansitemb {
						width: 130rpx;
						text-align: center;
						padding: 3rpx 0rpx;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #6383da;
						
					}
					.yuansitemc {
						width: 130rpx;
						text-align: center;
						padding: 3rpx 0rpx;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #ffaa00;
					}
					.texjjt {
						font-size: 28rpx;
						color: #ffffff;
					}
				}

			}

		}
	}
</style>
<style>
	@font-face {
		font-family: 'MyFont';
		src: url('@/static/fonts/LED.otf');
	}

	page {
		background-color: #f2f1f6;
	}
</style>